// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common
import Qt5Compat.GraphicalEffects

GraphicsBox {
  id: root

  property string prompt: ""
  property real money: 0
  property real refresh_cost: 0

  ListModel {
    id: talents
  }

  title.text: Util.processPrompt(prompt)
  width: body.width
  height: body.height + title.height + buttonArea.height

  GridView {
    id: body
    x : 5
    anchors.top: title.bottom
    anchors.topMargin: 10
    width: 540
    height: 400
    cellWidth: 180
    cellHeight: 180

    clip: true

    model: talents

    delegate: Item { // 每个战法模块
      width: body.cellWidth - 15
      height: body.cellHeight - 15
      Rectangle { // 背景
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "#EEEEEE"
        opacity: .53
        radius: 6
      }

      Rectangle {// 战法信息，包括名称，派系，稀有度
        id : talentInfo
        anchors.top: parent.top
        width: parent.width
        height: 26

        color: "#c4c4c4"
        opacity: .8
        radius: 3

        RowLayout {
          anchors.left : parent.left
          anchors.right : talentCost.left
          spacing: 4
          clip: true

          Image { // 战法图标
            id: talentPic
            fillMode: Image.PreserveAspectCrop
            source: SkinBank.getMarkPic("@!mark_" + model.name)
          }

          Text { // 战法名称
            id: talentName
            text: "<b>" + Lua.tr(model.name) + "</b>"
            color: {
              if (model.rarity === 2) {
                return "#335CFF";
              } else if (model.rarity === 3) {
                return "#DA5BFA";
              } else if (model.rarity === 4) {
                return "#F87C2A";
              }
              return "white";
            }
            wrapMode: Text.NoWrap // 不换行
            elide: Text.ElideRight // 文本过长时显示省略号
            font.pixelSize: 18
            textFormat: TextEdit.RichText
          }
        }

        Text { // 战法价格
          id: talentCost
          anchors.right : parent.right
          anchors.rightMargin : 10
          text: model.cost.toString()
          color: {
            if (model.cost > money) { // 买不起为红色，买得起为绿色
              return "#DD1525";
            }
            return "#0BB04A";
          }
          font.pixelSize: 18
          textFormat: TextEdit.RichText
        }
      }

      Flickable { // 战法描述
        id: talentDetail
        anchors.bottom: parent.bottom
        height: parent.height - talentInfo.height
        contentHeight: detail.height
        width: parent.width
        clip: true
        Text {
          id: detail
          width: parent.width
          text: Lua.tr(":" + model.name)
          color: "white"
          wrapMode: Text.WordWrap
          font.pixelSize: 16
          textFormat: TextEdit.RichText
        }
        Text { // 战法派系
          id: style
          anchors.top : detail.bottom
          width: parent.width
          text: model.style
          color: "#E4D5A0"
          wrapMode: Text.WordWrap
          font.pixelSize: 14
          horizontalAlignment: Text.AlignRight
        }
      }

      MouseArea { // 点击确认区域
        anchors.fill: parent
        onClicked: {
          if (model.cost > money) return;
          close();
          roomScene.state = "notactive";
          ClientInstance.replyToServer("", model.name);
        }
      }
    }
  }

  RowLayout {
    id: buttonArea
    anchors.left: parent.left
    anchors.leftMargin: 10
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 60
    spacing: 30

    MetroButton {
      id: cancelBtn
      text: Lua.tr("Cancel")
      onClicked: {
        close();
        roomScene.state = "notactive";
        ClientInstance.replyToServer("", "");
      }
    }

    Text {
      id: restMoney
      text: Lua.tr("Current Balance") + money.toString()
      color: "white"
      font.pixelSize: 20
      textFormat: TextEdit.RichText
    }

    Row {
      MetroButton {
        id: refreshBtn
        text: Lua.tr("Refresh Shop")
        enabled: money >= refresh_cost
        onClicked: {
          close();
          roomScene.state = "notactive";
          ClientInstance.replyToServer("", "refresh");
        }
      }
      Text {
        text: Lua.tr("Refresh Cost") + refresh_cost.toString()
        color: "white"
        font.pixelSize: 18
      }
    }

  }

  function loadData(data) {
    talents.clear();
    data[0].map(t => {
      talents.append({
        name: t.name,
        rarity: t.rarity,
        style: t.style,
        cost: t.cost,
      });
    });
    [prompt, money, refresh_cost] = [data[1], data[2], data[3]];
  }
}
